<template>
  <div class="home">
    <Toolbar />
    <main>
      <!-- 左侧组件列表 -->
      <section class="left">
        <ComponentList />
      </section>
      <!-- 中间画布 -->
      <section class="center">
        <div
          class="content"
          @drop="handleDrop"
          @dragover="handleDragOver"
          @mousedown="handleMouseDown"
          @mouseup="deselectCurComponent"
        >
          <Editor />
        </div>
      </section>
      <!-- 右侧属性列表 -->
      <section class="right">
        <el-tabs v-model="activeName">
          <el-tab-pane label="属性" name="attr">
            <AttrList v-if="curComponent" />
            <p v-else class="placeholder">请选择组件</p>
          </el-tab-pane>
          <el-tab-pane label="动画" name="animation">
            <AnimationList v-if="curComponent" />
            <p v-else class="placeholder">请选择组件</p>
          </el-tab-pane>
          <el-tab-pane label="事件" name="events">
            <EventList v-if="curComponent" />
            <p v-else class="placeholder">请选择组件</p>
          </el-tab-pane>
        </el-tabs>
      </section>
    </main>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import Toolbar from './pages/Toolbar.vue';
import ComponentList from './pages/ComponentList.vue'; // 左侧列表组件
import Editor from './pages/Editor/index.vue'; // 中间编辑区组件
import { componentList } from './widgets/component-list'; // 左侧列表数据
import AttrList from './pages/AttrList.vue'; // 右侧属性列表
import AnimationList from './pages/AnimationList.vue'; // 右侧动画列表
import EventList from './pages/EventList.vue'; // 右侧事件列表
import { deepCopy, generateID, listenGlobalKeyDown } from './utils';

const resetID = (data) => {
  data.forEach((item) => {
    item.id = generateID();
    if (item.component === 'Group') {
      resetID(item.propValue);
    }
  });
  return data;
};

export default {
  components: {
    Toolbar,
    ComponentList,
    Editor,
    AttrList,
    AnimationList,
    EventList,
  },
  data() {
    return {
      activeName: 'attr',
      reSelectAnimateIndex: undefined,
    };
  },
  computed: mapState([
    'componentData',
    'curComponent',
    'isClickComponent',
    'canvasStyleData',
    'editor',
  ]),
  created() {
    this.restore();
    // 全局监听按键事件
    listenGlobalKeyDown();
  },
  methods: {
    restore() {
      // 用保存的数据恢复画布
      const canvasData = localStorage.getItem('canvasData');
      const canvasStyle = localStorage.getItem('canvasStyle');
      if (canvasData) {
        this.$store.commit('setComponentData', resetID(JSON.parse(canvasData)));
      }
      if (canvasStyle) {
        this.$store.commit('setCanvasStyle', JSON.parse(canvasStyle));
      }
    },
    handleDrop(e) {
      e.preventDefault();
      e.stopPropagation();
      const index = e.dataTransfer.getData('index');
      const rectInfo = this.editor.getBoundingClientRect();
      if (index) {
        const component = deepCopy(componentList[index]);
        component.style.top = e.clientY - rectInfo.y;
        component.style.left = e.clientX - rectInfo.x;
        component.id = generateID();
        this.$store.commit('addComponent', { component });
        this.$store.commit('recordSnapshot');
      }
    },
    handleDragOver(e) {
      e.preventDefault();
      e.dataTransfer.dropEffect = 'copy';
    },
    handleMouseDown(e) {
      e.stopPropagation();
      this.$store.commit('setClickComponentStatus', false);
      this.$store.commit('setInEditorStatus', true);
    },
    deselectCurComponent(e) {
      if (!this.isClickComponent) {
        this.$store.commit('setCurComponent', { component: null, index: null });
      }
      // 0 左击 1 滚轮 2 右击
      if (e.button != 2) {
        this.$store.commit('hideContextMenu');
      }
    },
  },
};
</script>

<style lang="scss">
@import "./style/animate.scss";
.home {
  height: 100vh;
  background: #fff;
  main {
    height: calc(100% - 64px);
    position: relative;
    .left {
      position: absolute;
      height: 100%;
      width: 200px;
      left: 0;
      top: 0;
      padding-top: 10px;
    }
    .center {
      margin-left: 200px;
      margin-right: 262px;
      background: #f5f5f5;
      height: 100%;
      overflow: auto;
      padding: 20px;
      .content {
        width: 100%;
        height: 100%;
        overflow: auto;
      }
    }
    .right {
      position: absolute;
      height: 100%;
      width: 262px;
      right: 0;
      top: 0;
    }
  }
}
</style>
